<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // Object.defineProperty  数据劫持
     let obj = {
        name:'张三',
        age:18
     }
     let nameStr = ''
    //  defineProperty() 里面会接受三个参数  第一个你要劫持的对象 第二个参数 你要劫持的属性，第三个参数是一个选项对象
    
    // 通过defineProperty来劫持对象中的name属性
    Object.defineProperty(obj,'name',{
        get:function(){
            console.log('我是get方法，我触发了吗');
            return nameStr
        },
        set:function(val){
            console.log(val);//设置后的结果
            console.log('我是set方法');
            // defineProperty 设置的属性和obj原有的属性相同的时候会造成死循环
            // obj.name  = val   ///死循环
            nameStr = val
        }
    })
    console.log(obj.name);
    obj.name = '张三你好'
    console.log(obj.name);//李四

    // get 方法  在读取属性的时候调用的函数    set方法，在设置属性的时候会调用


    let arr = [1,2,3,4,5]
    // 劫持数组的时候 第一个参数  劫持的数据  第二个参数 就是数组的下标   第三个参数是一个选项对象
    Object.defineProperty(arr,0,{
        get(){
            console.log('arr  get');
            return '哈哈'
        },
        set(val){
          console.log(val);
          console.log('arr set');
        }
    })
    arr[0] = '嘿嘿'
    console.log(arr[0]);
    console.log(arr);



    let  o = {
        a:10,
        b:20,
        // c:{
        //     d:11
        // }
    }

  


   

</script>
</html>